import React, { useState } from 'react';
import { Form, Input, Button, DatePicker, TimePicker, InputNumber, Select, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { useDispatch } from 'react-redux';
import { createActivityStart, createActivitySuccess, createActivityFailure } from '../store/slices/activitySlice';
import moment from 'moment';

const { TextArea } = Input;
const { Option } = Select;

const StyledForm = styled(Form)`
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

const FormTitle = styled.h1`
  text-align: center;
  margin-bottom: 32px;
  color: #1890ff;
`;

const StyledButton = styled(Button)`
  width: 100%;
  height: 40px;
  font-size: 16px;
`;

const Create: React.FC = () => {
    const [form] = Form.useForm();
    const dispatch = useDispatch();
    const [fileList, setFileList] = useState<any[]>([]);

    const onFinish = async (values: any) => {
        try {
            dispatch(createActivityStart());

            // 这里应该调用后端 API 创建活动
            // 目前使用模拟数据
            const newActivity = {
                id: Date.now().toString(),
                ...values,
                date: values.date.format('YYYY-MM-DD'),
                time: values.time.format('HH:mm'),
                participants: 0,
                images: fileList.map(file => file.url || file.thumbUrl),
                creatorId: '1', // 这里应该使用实际的用户 ID
                createdAt: moment().format(),
            };

            dispatch(createActivitySuccess(newActivity));
            message.success('活动创建成功！');
            form.resetFields();
            setFileList([]);
        } catch (error) {
            const errorMessage = error instanceof Error ? error.message : '创建活动失败，请重试';
            dispatch(createActivityFailure(errorMessage));
            message.error(errorMessage);
        }
    };

    const handleFileChange = ({ fileList }: any) => {
        setFileList(fileList);
    };

    return (
        <StyledForm
            form={form}
            layout="vertical"
            onFinish={onFinish}
            requiredMark={false}
        >
            <FormTitle>发布新活动</FormTitle>

            <Form.Item
                name="title"
                label="活动标题"
                rules={[{ required: true, message: '请输入活动标题' }]}
            >
                <Input placeholder="请输入活动标题" />
            </Form.Item>

            <Form.Item
                name="description"
                label="活动描述"
                rules={[{ required: true, message: '请输入活动描述' }]}
            >
                <TextArea rows={4} placeholder="请详细描述活动内容" />
            </Form.Item>

            <Form.Item
                name="location"
                label="活动地点"
                rules={[{ required: true, message: '请输入活动地点' }]}
            >
                <Input placeholder="请输入活动地点" />
            </Form.Item>

            <Form.Item
                name="date"
                label="活动日期"
                rules={[{ required: true, message: '请选择活动日期' }]}
            >
                <DatePicker style={{ width: '100%' }} />
            </Form.Item>

            <Form.Item
                name="time"
                label="活动时间"
                rules={[{ required: true, message: '请选择活动时间' }]}
            >
                <TimePicker style={{ width: '100%' }} format="HH:mm" />
            </Form.Item>

            <Form.Item
                name="capacity"
                label="参与人数上限"
                rules={[{ required: true, message: '请输入参与人数上限' }]}
            >
                <InputNumber min={1} style={{ width: '100%' }} />
            </Form.Item>

            <Form.Item
                name="tags"
                label="活动标签"
                rules={[{ required: true, message: '请选择活动标签' }]}
            >
                <Select mode="tags" placeholder="请选择或输入活动标签">
                    <Option value="运动">运动</Option>
                    <Option value="音乐">音乐</Option>
                    <Option value="电影">电影</Option>
                    <Option value="美食">美食</Option>
                    <Option value="旅行">旅行</Option>
                    <Option value="读书">读书</Option>
                </Select>
            </Form.Item>

            <Form.Item
                name="images"
                label="活动图片"
            >
                <Upload
                    listType="picture"
                    fileList={fileList}
                    onChange={handleFileChange}
                    beforeUpload={() => false}
                    multiple
                >
                    <Button icon={<UploadOutlined />}>上传图片</Button>
                </Upload>
            </Form.Item>

            <Form.Item>
                <StyledButton type="primary" htmlType="submit">
                    发布活动
                </StyledButton>
            </Form.Item>
        </StyledForm>
    );
};

export default Create; 